import React from 'react';
import { MessageSender, type ChatMessage } from '@/types/aiChat';

interface MessageBubbleProps {
  message: ChatMessage;
}

/**
 * 消息气泡组件
 * 根据发送者类型显示不同样式的消息气泡
 */
const MessageBubble: React.FC<MessageBubbleProps> = ({ message }) => {
  const { content, sender, timestamp } = message;
  const isUser = sender === MessageSender.USER;
  
  // 格式化时间戳
  const formattedTime = new Date(timestamp).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  });
  
  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`}>
      <div className={`max-w-[80%]`}>
        <div 
          className={`rounded-lg p-3 whitespace-pre-wrap break-words ${
            isUser 
              ? 'bg-primary text-primary-foreground' 
              : 'bg-accent border border-border text-foreground'
          }`}
        >
          {content}
        </div>
        <div 
          className={`text-xs text-muted-foreground mt-1 ${
            isUser ? 'text-right' : 'text-left'
          }`}
        >
          {formattedTime}
        </div>
      </div>
    </div>
  );
};

export default MessageBubble;
